<template>
  <div class="searchResult">
    <!-- 搜索结果导航栏 -->
    <van-nav-bar title="搜索结果" left-arrow @click-left="onClickLeft" />

    <!-- 搜索结果列表 -->
    <van-list
      class="content"
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <!-- 搜索的内容 -->
      <div class="noMore" v-if="showNoMore">没有更多了</div>
      <div
        v-else
        class="hasMore"
        v-for="(item, index) in searchList"
        :key="index"
      >
        <div @click="$router.push(`/detail/${item.art_id}`)">
          <div class="title">"{{ item.title }}"</div>
          <div class="img" v-show="item.cover.images.length !== 0">
            <span v-for="(value, key) in item.cover.images" :key="key">
              <img :src="value" alt="" />
            </span>
          </div>
        </div>
        <div class="user">
          <span>{{ item.aut_name }}</span>
          <span @click="$router.push(`/detail/${item.art_id}`)">
            {{ item.comm_count }} 条评论</span
          >
          <span> {{ item.pubdate | timefilter }}</span>
        </div>
        <div class="items">
          <span class="item" @click="$router.push(`/detail/${item.art_id}`)"
            ><van-icon name="comment-o" />{{ item.comm_count }}</span
          >
          <span class="item" @click="zanWenZhang"
            ><van-icon name="like-o" />点赞</span
          >
          <span class="item"><van-icon name="exchange" />分享</span>
        </div>
      </div>
    </van-list>
  </div>
</template>
<script>
import { getSearchResult } from '@/api/search'
export default {
  data () {
    return {
      searchList: [], // 搜索结果列表
      showNoMore: false,
      loading: false,
      finished: false,
      per_page: 10, // 每页数量
      page: -10, // 页数
      total: 0, // 总数
      searchContent: '',
      show: false
    }
  },
  methods: {
    // 上拉加载更多
    async onLoad () {
      this.page += this.per_page
      // 发送请求得到搜索数据
      const res = await getSearchResult({
        q: this.$route.params,
        per_page: this.per_page,
        page: this.page
      })
      this.searchList.push(...res.data.results)
      console.log('搜索结果', res)
      this.searchContent = this.$route.params.key.split(':')[1]
      // this.searchContent = res.config.params.q

      this.total = res.data.total_count
      // 加载状态改为false
      this.loading = false
      // 判断所有数据是否加载完毕
      if (this.searchList.length >= this.total) {
        this.finished = true
      }
    },
    // 点赞
    zanWenZhang () {
      this.show = false
    },
    // 取消点赞
    BuZanWenZhang () {
      this.show = true
    },
    // 左侧跳转到搜索页面
    onClickLeft () {
      this.$router.push('/search')
    }
  },

  // 获取搜索结果
  created () {
    this.onLoad()
  }
}
</script>

<style lang="less" scoped>
.searchResult {
  /deep/ .van-nav-bar__content {
    position: fixed;
    width: 100%;
    top: 0;
    background-color: #3296fa;
    ::before {
      color: #fff;
    }
  }
  /deep/.van-nav-bar__title.van-ellipsis {
    color: #fff;
  }

  .content {
    .searchContent {
      span {
        color: red;
      }
      margin-top: 50px;
      font-size: 20px;
      word-wrap: break-word;
      padding: 0 15px;
      color: red;
    }
    margin-top: 50px;
    .noMore {
      margin-top: 14px;
      font-size: 14px;
      color: #9697b3;
      text-align: center;
    }
    .hasMore {
      padding: 30px 15px 5px;
      // 标题
      .title {
        font-size: 14px;
        font-weight: 600;
        line-height: 1.3;
        margin-bottom: 30px;
      }
      // 图片区域
      .img {
        span {
          display: inline-block;
          width: 112px;
          height: 80px;
        }
        img {
          width: 100%;
        }
      }
      // 用户信息
      .user {
        color: #323233;
        font-size: 14px;
        margin-bottom: 10px;
        span {
          margin: 0 5px;
        }
      }
      // 三连
      .items {
        box-sizing: border-box;
        display: flex;
        .item {
          font-size: 16px;
          line-height: 60px;
          text-align: center;
          flex: 1;
          i.van-icon {
            vertical-align: middle;
            font-size: 20px;
            margin-right: 4px;
          }
        }
        .item:nth-child(2) {
          border-left: 1px solid #eee;
          border-right: 1px solid #eee;
        }
      }
    }
  }
}
</style>
